/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

// module
import Taro, { Component } from '@tarojs/taro';
import {Input} from '@tarojs/components';
import { AtFloatLayout  } from 'taro-ui';

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Toast, Loading, Modal, ActionSheet} from '../../library/func';
import Icon from '../../project/style/icon';
import Http from '../../project/func/http/http';
import '../../library/style/patch.css';

// 引用组件
// import { Addcbtn, Editcunit } from '../../project/comp';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/


export default class EditIndex extends Component {
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {

			// 类别列表
			catmap:[],
			// 分类名称
			value: ' ',
			// 分类排序
			sort: 0,
			// 分类id
			id: 0,
			// 编辑气泡显隐
			show: false
		}
	}
	
	/*------------------------------------------------------------------------------------
	* 声明周期
	*-----------------------------------------------------------------------------------*/
	// didmount
	componentDidMount(){
		this.getData()
	}

	// didshow
	componentDidShow(){
		this.getData()
	}

	getData = (callbcak)=> {
		Http.Loading({
			url:'materialCate/list.php',
			success: (data)=>{
				let obj = {}
				let arr = []
				for(let v of data){
					obj = {key: v.id, name: v.set_name, sort:v.set_sort}
					arr.push(obj)
				}
				this.setState({
					catmap: arr,
				})
				if(callbcak){
					callbcak();
				}	
			}
		})
	}

    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	config = {
        navigationBarTitleText: '类别列表'
	}
	 
	changeValue = value =>{
         this.setState({
             value:value
         })
	 }
	 
	// 改变input的value值
	onInput = (type, e)=> {
		if(type == 'name'){
			this.setState({
				value: e.detail.value
			})
		}
		if(type == 'sort'){
			this.setState({
				sort: e.detail.value
			})
		}
	}
	handleClose = ()=> {
		this.setState({
			show: false
		})
	}

	// onRedirect
	onRedirect(url){
		wx.redirectTo({
			url: url
		})
	}
	    
	// onNavigate
	onNavigate(url){
	    wx.navigateTo({
	        url: url
	    })
	}
	    
	//onNavigateBack
	onNavigateBack(num=1){
	     wx.navigateBack({
	        delta: num
	     })                    
	}

	// 编辑类别
	onEdit = (name, sort, id, e)=> {
		this.setState({
			show: true,
			value: name,
			sort: sort,
			id: id
		})
	}

	// 修改类别排序或者名称
	onSubmit = ()=> {
		Http.post({
			url: 'materialCate/logic/update.php',
			data:{
				id: this.state.id,
				set_name: this.state.value,
				set_sort: this.state.sort
			},
			success: (data)=>{
				this.setState({
					show: false
				})
				this.getData(()=>{
					Toast.success('更新成功!')
				})
			}
		})
	}

	// 删除类别
	onDelete = (id, e)=> {
		Modal.confirm('确定删除此类别吗?','删除后不可恢复',()=>{
			// 点击确定
			Http.post({
				url: 'materialCate/logic/delete.php',
				data:{
					id: id,
				},
				success: (data)=>{
					this.setState({
						show: false
					})
					this.getData(()=>{
						Toast.success('删除成功!')
					})
				}
			})
		},()=>{
			// 取消不进行任何操作
		})
		
	}
	
	/*------------------------------------------------------------------------------------
	* 渲染
	*-----------------------------------------------------------------------------------*/
	render() {
		return (
			<CPage>

				{/* 顶部添加按钮 */}
				<CHeader y='center' pt='2' h='60' bg='#f2f2f2'>
					<CBetween bg='#fff' ba='1 solid #debf46' style='font-size:30rpx;' w='300' color='#debf46' py='10' ml='37.5' x='center' ra='10' onClick={this.onNavigate.bind(this, '/screen/album/cateadd')}>添加类别</CBetween>
				</CHeader>
				<CContent style='height:100vh;' bg='#fff' mt='65'>

					{/* 循环所有分类 */}
					{this.state.catmap.map(item => {
						return (
							<CBetween class='f1' y='center' pa='10' bb='1 solid #f0f0f0'>
								<CLine class='f08'>

									{/* 类别的名称和排序 */}
									<CItemY>
										<CLine>
											<CText size='14' color='#3c3c3c'>名称：</CText>
											<CHand size='14' pl='5' color='#3c3c3c'>{item.name}</CHand>
										</CLine>
										<CLine class='f03' pt='6'>
											<CText size='14' color='#3c3c3c'>排序：</CText>
											<CHand size='14' pl='5' color='#3c3c3c'>{item.sort}</CHand>
										</CLine>
									</CItemY>
								</CLine>

								{/* 编辑按钮 */}
								<CLine class='f04' x='center'>
									<CButton bg='#debf46' color='#fff' style='font-size:30rpx;' px='12' py='6' ra='8' mr='8' onClick={this.onEdit.bind(this, item.name, item.sort, item.key)}>编辑</CButton>
									<CButton bg='#debf46' color='#fff' style='font-size:30rpx;' px='12' py='6' ra='8' onClick={this.onDelete.bind(this, item.key)}>删除</CButton>
								</CLine>

							</CBetween>
						)
					})}

				</CContent>

				<AtFloatLayout
					isOpened = {this.state.show}
					title='编辑类别'
					onClose={ this.handleClose } 
				>

					<CColumn h='400' bg='#fff'>

						{/* 类别名称 */}
						<Input
							value = {this.state.value}
							onInput = {this.onInput.bind(this, 'name')}
							style='border-bottom:1px solid #f0f0f0; height:40px; width:100%'
						/>

						{/* 类别排序 */}
						<Input
							value = {this.state.sort}
							onInput = {this.onInput.bind(this, 'sort')}
							style='border-bottom:1px solid #f0f0f0; height:40px; width:100%'
						/>

						{/* 提交按钮 */}
						<CButton bg='#debf46' color='#fff' mt='20' w='300' x='center' y='center' ml='37.5' h='40' ra='10' style='font-size:30rpx;' onClick={this.onSubmit}>提交</CButton>

					</CColumn>

				</AtFloatLayout>

			</CPage>
		);
	}
}

